<template>
  <div class="dayQualityControl tapStyle secondary-page-mode">
    <div v-if="false" class="secondary-toolbar">
      <span>监测项目 :</span>
      <div class="layoutBox" style="width:120px">
        <el-select v-model="value" multiple collapse-tags placeholder="请选择">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>&emsp;&emsp;
      <el-button>
        <i class="iconfont icon-sousuo"></i>查询
      </el-button>
      <el-button type="delet" @click="dailyQuality = true">
        <i class="iconfont icon-daochu"></i>设置内容
      </el-button>
    </div>
    <div class="currency-mode-wrap" style="margin-top: 0;height: 100%;">
      <!-- <div class="reminder-wrap">
        <span class="reminder-title">温馨提示</span>
        <div class="reminder-content" style="width: 100%">
          <div class="reminder-text">
            <p>该点位最新一次质控参数设置于xxxx年xx月xx日，至今已使用xx年xx月x天；期间日质控合格了m次；不合格了m次。造成无效数据xx条</p>
            <div>
              <el-button type="noticonsecondBtn">生成任务</el-button>
            </div>
          </div>
        </div>
      </div> -->
      <div class="currency-body-wrap" style="height: calc(100% - 52px);">
        <el-scrollbar style="height: 100%;">
          <div class="modular-box">
            <div class="modular-header">
              <span class="title">当前使用24小时质控参数信息</span>
            </div>
            <div class="modular-body">
              <div class="modular-row clear">
                <div class="statistics-text clear">
                  <span>{{levDesone}}: {{currentLev}}</span>
                  <span>{{levDestwo}}: {{targetLev}}</span>
                </div>
                <div class="toolbar">
                  <el-button
                    @click="dailyQuality = true"
                    style="margin: 0;display: inline-block;vertical-align: middle;"
                  >参数设置</el-button>
                </div>
              </div>
              <div
                class="table-box"
                style="padding: 0 6px 6px;"
                v-loading="loadingtwo"
                element-loading-text="加载中"
                element-loading-spinner="loading-type-a"
                element-loading-background="rgba(255, 255, 255, 1)"
              >
                <el-table :data="tableData" border style="width: 100%">
                  <el-table-column prop="indexName" label="监测项目"></el-table-column>
                  <el-table-column prop="spanValue" label="跨度值"></el-table-column>
                  <el-table-column prop="zeroStandardValue" label="零点标准溶液浓度"></el-table-column>
                  <el-table-column prop="spanStandardValue" label="跨度标准溶液浓度"></el-table-column>
                  <el-table-column prop="submitTime" width="160" label="提交时间"></el-table-column>
                  <el-table-column prop="submitter" label="提交人"></el-table-column>
                  <el-table-column prop="auditTime" width="160" label="审核时间"></el-table-column>
                  <el-table-column prop="auditor" :show-overflow-tooltip="true" label="审核人"></el-table-column>
                  <el-table-column prop="operation" width="188px" label="操作">
                    <template slot-scope="scope">
                      <span v-if="scope.row.operation === 0" style="color: #666">无相应权限</span>
                      <el-button type="secondBtn">审核</el-button>
                      <!--<el-button @click="singleFactor = true"  type="secondBtn">设置</el-button>-->
                    </template>
                  </el-table-column>
                  <el-table-column prop="indexCount" label="历史记录"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="modular-box">
            <div class="modular-header">
              <span class="title">历史设置24小时质控参数信息</span>
              <div class="toolbar">
                <span>时间范围 :</span>
                <div class="layoutBox" style="width:242px">
                  <el-date-picker
                    v-model="dateRange"
                    align="right"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </div>&emsp;
                <el-button style="margin: 0;" @click="historyDayQuality()">
                  <i class="iconfont icon-sousuo"></i>查询
                </el-button>
              </div>
            </div>
            <div class="modular-body">
              <div class="modular-row">
                <div class="state-radio-wrap">
                  <el-radio-group v-model="stateRadio" size="small" @change="historyDayQuality()">
                    <el-radio-button
                      v-for="(item,key) in radioData"
                      :label="item.id"
                      :key="key"
                    >{{item.label}}</el-radio-button>
                    <!-- <el-radio-button label="w01019">高锰酸盐</el-radio-button>
                    <el-radio-button label="w21003">氨氮</el-radio-button>
                    <el-radio-button label="w21011">总磷</el-radio-button>
                    <el-radio-button label="w21001">总氮</el-radio-button>-->
                  </el-radio-group>
                </div>
              </div>
              <div
                class="table-box"
                style="padding: 0 6px 6px;"
                v-loading="loading"
                element-loading-text="加载中"
                element-loading-spinner="loading-type-a"
                element-loading-background="rgba(255, 255, 255, 1)"
              >
                <el-table :data="tableDataB" border>
                  <el-table-column prop="submitTime" label="提交时间"></el-table-column>
                  <el-table-column prop="submitter" label="提交人"></el-table-column>
                  <el-table-column prop="auditTime" label="审核时间"></el-table-column>
                  <el-table-column prop="auditor" label="审核人"></el-table-column>
                  <el-table-column prop="spanValue" label="跨度值"></el-table-column>
                  <el-table-column prop="zeroStandardValue" label="零点标准溶液浓度"></el-table-column>
                  <el-table-column prop="useTime" label="使用时间"></el-table-column>
                  <el-table-column prop="qualityControl" label="质控次数"></el-table-column>
                  <el-table-column prop="unqualified" label="不合格次数"></el-table-column>
                  <el-table-column prop="impactData" label="影响数据"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <!-- 参数设置dialog弹窗 -->
    <el-dialog
      width="840px"
      title="日质控设置"
      @close="resetDailyBatchData()"
      :visible.sync="dailyQuality"
    >
      <div class="daily-quality-box" style="padding: 8px;">
        <div class="daily-head-wrap">
          <div class="row clear">
            <span class="label">当前点位：{{stationName}}</span>
          </div>
          <div class="row clear">
            <span>{{levDesone}}: {{currentLev}}</span>
                  <span>{{levDestwo}}: {{targetLev}}</span>
          </div>
          <div class="row clear">
            <span class="label">所属区域：{{areaName}}</span>
            <span class="label">所属流域：{{basinName}}</span>
          </div>
        </div>
        <div class="daily-table-wrap">
          <table class="normal-table">
            <tr>
              <th width="134px;">监测项目</th>
              <th v-for="(item,index) in dailyTableHead" :key="index">{{ item.name }}</th>
            </tr>
            <tr v-for="(item,index) in dailyQualityTable" :key="index">
              <td>
                <span>{{ item.name }}</span>
              </td>
              <td>
                <span v-if="index === 0">{{ item.acidSalt }}</span>
                <div v-if="index !== 0" class="layoutBox" style="width:80px">
                  <el-input v-model="item.acidSalt"></el-input>
                </div>
                <span>（mg/L）</span>
              </td>
              <td>
                <span v-if="index === 0">{{ item.ammonia }}</span>
                <div v-if="index !== 0" class="layoutBox" style="width:80px">
                  <el-input v-model="item.ammonia"></el-input>
                </div>
                <span>（mg/L）</span>
              </td>
              <td>
                <span v-if="index === 0">{{ item.phosphorus }}</span>
                <div v-if="index !== 0" class="layoutBox" style="width:80px">
                  <el-input v-model="item.phosphorus"></el-input>
                </div>
                <span>（mg/L）</span>
              </td>
              <td>
                <span v-if="index === 0">{{ item.nitrogen }}</span>
                <div v-if="index !== 0" class="layoutBox" style="width:80px">
                  <el-input v-model="item.nitrogen"></el-input>
                </div>
                <span>（mg/L）</span>
              </td>
            </tr>
            <!--<tr>-->
            <!--<td>跨度值</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--</tr>-->
            <!--<tr>-->
            <!--<td>零点标准溶液浓度</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--</tr>-->
            <!--<tr>-->
            <!--<td>跨度标准溶液浓度</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--<td> <div class="layoutBox" style="width:80px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>-->
            <!--</tr>-->
            <tr>
              <td></td>
              <td v-for="(item,index) in dailyTableHead" :key="index">
                <el-button @click="submitDaily(item)">提交</el-button>
              </td>
            </tr>
          </table>
          <div class="btn-wrap">
            <el-button @click="submitDailyBatch()" style="width: 100px;">批量提交</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 参数设置dialog弹窗
    <el-dialog
      width="550px" title="单因子质控设置"
      :visible.sync="singleFactor" >
      <div class="daily-quality-box" style="padding: 8px;">
        <div class="daily-head-wrap">
          <div class="row clear">
            <span class="label">当前点位：XXXXXX</span>
          </div>
          <div class="row clear">
            <span class="label">目标水质：XXXXXX</span>
            <span class="label">当前水质：XXXXXX</span>
          </div>
          <div class="row clear">
            <span class="label">所属区域：XXXXXX</span>
            <span class="label">所属流域：XXXXXX</span>
          </div>
        </div>
        <div class="daily-table-wrap">
          <table class="normal-table" width="100%">
            <tr>
              <th width="134px;">监测项目</th>
              <th>高锰酸盐</th>
            </tr>
            <tr>
              <td>上一周的水质平均值</td>
              <td>1.9（mg/L）</td>
            </tr>
            <tr>
              <td>跨度值</td>
              <td> <div class="layoutBox" style="width:140px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>
            </tr>
            <tr>
              <td>零点标准溶液浓度</td>
              <td> <div class="layoutBox" style="width:140px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>
            </tr>
            <tr>
              <td>跨度标准溶液浓度</td>
              <td> <div class="layoutBox" style="width:140px"><el-input v-model="tableInput"></el-input></div>（mg/L）</td>
            </tr>
            <tr>
              <td></td>
              <td><el-button>提交</el-button></td>
            </tr>
          </table>
          <div class="btn-wrap">
            <el-button style="width: 100px;">批量提交</el-button>
          </div>
        </div>
      </div>
    </el-dialog>-->
  </div>
</template>

<script>
export default {
  name: "dayQualityControl",
  data() {
    return {
      levDesone: "目标水质",
      levDestwo: "当前水质",
      targetLev: "", //目标水质
      currentLev: "", //当前水质
      stationName: "",
      areaName: "",
      basinName: "",
      value: [],
      loadingtwo: true,
      loading: true,
      dateRange: "",
      stateRadio: "w01019",
      stationId: "",
      optionData: [
        { value: 1, label: "水温", standard: "", isShow: true },
        { value: 2, label: "pH", standard: "6~9", isShow: true },
        { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
        { value: 4, label: "电导率", standard: "", isShow: true },
        { value: 5, label: "浊度", standard: "", isShow: true },
        { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
        { value: 7, label: "氨氮", standard: "1", isShow: true },
        { value: 8, label: "总磷", standard: "0.2", isShow: true },
        { value: 9, label: "总氮", standard: "", isShow: true }
      ],
      tableData: [],
      tableDataB: [],
      dailyQuality: false,
      tableInput: "",
      singleFactor: false,
      dialogData: [
        {
          monitoringItems: "高锰酸钾",
          waterQuality: "",
          spanValue: "",
          zeroPoint: "",
          span: ""
        },
        {
          monitoringItems: "氨氮",
          waterQuality: "",
          spanValue: "",
          zeroPoint: "",
          span: ""
        },
        {
          monitoringItems: "总磷",
          waterQuality: "",
          spanValue: "",
          zeroPoint: "",
          span: ""
        },
        {
          monitoringItems: "总氮",
          waterQuality: "",
          spanValue: "",
          zeroPoint: "",
          span: ""
        }
      ],
      dailyTableHead: [
        {
          name: "高锰酸盐",
          itemCode: "w01019",
          prop: "acidSalt"
        },
        {
          name: "氨氮",
          itemCode: "w21003",
          prop: "ammonia"
        },
        {
          name: "总磷",
          itemCode: "w21011",
          prop: "phosphorus"
        },
        {
          name: "总氮",
          itemCode: "w21001",
          prop: "nitrogen"
        }
      ],
      radioData: [],
      //日质控设置弹窗表格原始数据
      dailyQualityTable: [
        {
          name: "上一周的水质平均值",
          acidSalt: "1.9",
          ammonia: "0.12",
          phosphorus: "0.039",
          nitrogen: "4.96"
        },
        {
          name: "跨度值",
          acidSalt: "",
          ammonia: "",
          phosphorus: "",
          nitrogen: ""
        },
        {
          name: "零点标准溶液浓度",
          acidSalt: "",
          ammonia: "",
          phosphorus: "",
          nitrogen: ""
        },
        {
          name: "跨度标准溶液浓度",
          acidSalt: "",
          ammonia: "",
          phosphorus: "",
          nitrogen: ""
        }
      ],
      //日质控设置弹窗表格重置数据
      resetDailyQualityTable: [],
      stationType:'',
    };
  },
  methods: {
    //获取日质控当前使用24小时质控参数信息
    getCurrentData() {
      this.loadingtwo = true;
      this.$http
        .get("/Quality/qualityControlSet/currentDayQualityControlParam", {
          params: {
            stationCodes: this.stationId
          }
        })
        .then(res => {
          if (res.data.code === 0) {
            this.tableData = res.data.content.dataList;
            this.loadingtwo = false;
          }
        });
    },
    //获取日质控历史设置24小时质控参数信息
    historyDayQuality() {
      this.loading = true;
      this.$http
        .get("/Quality/qualityControlSet/historyDayQualityControlParam", {
          params: {
            startTime: this.dateRange[0].format("yyyy-MM-dd"),
            endTime: this.dateRange[1].format("yyyy-MM-dd"),
            indexCodes: this.stateRadio,
            stationCodes: this.stationId
          }
        })
        .then(res => {
          if (res.data.code === 0) {
            this.loading = false;
            this.tableDataB = res.data.content.dataList;
          }
        });
    },
    //获取当前水质或者污染源等级
    getLev() {
      this.$http
        .get("/Quality/qualityControlSet/getStationCurrentWaterQualityData", {
          params: {
            stationCode: this.stationId
          }
        })
        .then(res => {
          if(this.stationType == '002'){
            this.currentLev = this.paramsObj.setPolluLev(res.data.content.info);
          }else{
            this.currentLev = this.paramsObj.setWaterLev(res.data.content.info);
          }
          
        });
    },
    //日质控设置单个因子提交
    submitDaily(item) {
      let param = {
        stationCodes: this.stationId, //this.stationId,
        indexCode: item.itemCode,
        spanValue: this.dailyQualityTable[1][item.prop],
        zeroStandardValue: this.dailyQualityTable[2][item.prop],
        spanStandardValue: this.dailyQualityTable[3][item.prop]
      };
      this.$http
        .post(
          "/Quality/qualityControlSet/editorCurrentDayQualityControlParam",
          [param]
        )
        .then(res => {
          if (res.data.code === 0) {
            this.dailyQualityTable[1][item.prop] = "";
            this.dailyQualityTable[2][item.prop] = "";
            this.dailyQualityTable[3][item.prop] = "";
            this.getCurrentData();
            this.historyDayQuality();
            this.$message({
              message: res.data.message,
              type: "success"
            });
          }
        });
    },
    //日质控设置批量提交
    submitDailyBatch() {
      let list = [];
      this.dailyTableHead.forEach(item => {
        let param = {
          stationCodes: this.stationId,
          indexCode: item.itemCode,
          spanValue: this.dailyQualityTable[1][item.prop],
          zeroStandardValue: this.dailyQualityTable[2][item.prop],
          spanStandardValue: this.dailyQualityTable[3][item.prop]
        };
        list.push(param);
      });
      // console.log(list);
      this.$http
        .post(
          "/Quality/qualityControlSet/editorCurrentDayQualityControlParam",
          list
        )
        .then(res => {
          if (res.data.code === 0) {
            this.dailyQuality = false;
            this.$message({
              message: res.data.message,
              type: "success"
            });
            this.resetDailyBatchData();
            this.getCurrentData();
            this.historyDayQuality();
          }
        });
    },
    //重置日质控设置弹窗表格的数据
    resetDailyBatchData() {
      this.dailyQualityTable = JSON.parse(
        JSON.stringify(this.resetDailyQualityTable)
      );
    }
  },
  created() {
    this.$store.commit("setShowlefttree", true);
    this.dateRange = [
      new Date(new Date().setDate(new Date().getDate() - 10)),
      new Date()
    ];

    //重置数据 拷贝 原始数据
    this.resetDailyQualityTable = JSON.parse(
      JSON.stringify(this.dailyQualityTable)
    );

    //测试使用=》开始
    // this.stationId = '10005';
    // this.$nextTick(()=>{
    //   this.getCurrentData();
    //   this.historyDayQuality();
    // });
    //测试使用=》结束
  },
  computed: {
    totalPageNumber() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.total / this.pageSize);
      return number;
    },
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    }
  },
  watch: {
    stationInfo(value) {
      if (value.length > 0) {
        this.stationId = value[0].nodeId;
        this.stationType=value[0].stationType1;
        this.stationName = value[0].nodeName;
        this.areaName = value[0].areaName;
        this.basinName = value[0].basinName;
        if (value[0].stationType1 === "002") {
          this.targetLev = this.paramsObj.setPolluLev(
          value[0].targerWaterQuality
        );
          this.stateRadio = "w01018";
          this.levDesone = "当前排放";
          this.levDestwo = "排放标准";
          this.radioData = [
            { id: "w01018", label: "COD" },
            { id: "w21003", label: "氨氮" },
            { id: "w21011", label: "总磷" },
            { id: "w21001", label: "总氮" }
          ];
          this.dailyTableHead = [
            {
              name: "COD",
              itemCode: "w01018",
              prop: "acidSalt"
            },
            {
              name: "氨氮",
              itemCode: "w21003",
              prop: "ammonia"
            },
            {
              name: "总磷",
              itemCode: "w21011",
              prop: "phosphorus"
            },
            {
              name: "总氮",
              itemCode: "w21001",
              prop: "nitrogen"
            }
          ];
        } else {
          this.targetLev = this.paramsObj.setWaterLev(
          value[0].targerWaterQuality
        );
          this.dailyTableHead = [
            {
              name: "高锰酸盐",
              itemCode: "w01019",
              prop: "acidSalt"
            },
            {
              name: "氨氮",
              itemCode: "w21003",
              prop: "ammonia"
            },
            {
              name: "总磷",
              itemCode: "w21011",
              prop: "phosphorus"
            },
            {
              name: "总氮",
              itemCode: "w21001",
              prop: "nitrogen"
            }
          ];
          this.radioData = [
            { id: "w01019", label: "高锰酸盐" },
            { id: "w21003", label: "氨氮" },
            { id: "w21011", label: "总磷" },
            { id: "w21001", label: "总氮" }
          ];
          this.levDesone = "当前水质";
          this.levDestwo = "目标水质";
        }
        this.getCurrentData();
        this.historyDayQuality();
        this.getLev();
      }
    }
  }
};
</script>

<style scoped lang="less">
.editInput {
  width: 50px;
  border: none;
  outline: none;
}
.modular-box {
  border: 1px solid #dce9fa;
  margin-top: 6px;
  .modular-header {
    height: 40px;
    line-height: 40px;
    padding: 0 8px;
    border-bottom: 1px solid #dce9fa;
    .title {
      font-size: 16px;
    }
    .title:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      width: 3px;
      height: 10px;
      background: #166bce;
      margin-bottom: 3px;
      margin-right: 16px;
    }
  }
  .modular-body {
    min-height: 100px;
  }
  .toolbar {
    float: right;
    line-height: 38px;
    & > button {
      margin-bottom: 3px;
    }
  }
  .modular-row {
    padding: 6px;
  }
}
.currency-body-wrap {
  height: calc(100%);
}
.statistics-text {
  display: inline-block;
  vertical-align: top;
  position: relative;
  background: #e6f1fc;
  border: 1px solid #cad9eb;
  line-height: 36px;
  padding: 0 10px;
  & > span {
    margin-right: 24px;
  }
  & > span:last-child {
    margin-right: 0;
  }
  &:before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px solid #166bce;
    border-right: none;
    border-bottom: none;
    top: -1px;
    left: -1px;
  }
  &:after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px solid #166bce;
    border-top: none;
    border-left: none;
    right: -1px;
    bottom: -1px;
  }
}
/* 日质控设置弹窗样式 */
.daily-quality-box {
  .daily-head-wrap {
    .row {
      padding-bottom: 10px;
      & > span {
        width: 50%;
        float: left;
      }
    }
  }
  .daily-table-wrap {
    .normal-table {
      th {
        text-align: center;
        height: 40px;
      }
      td {
        text-align: center;
        padding: 4px;
        height: 40px;
      }
    }
    .btn-wrap {
      text-align: center;
      padding-top: 10px;
    }
  }
}
</style>
